<template>
	<view>
		<view class="search">
			<icon type="search" color="white" size="10"></icon>
			<input type="text" value="" placeholder="搜索商品" placeholder-class="placeholder"/>
		</view>
		<view class="list" v-if="proList.length>0">
			<view class="row" v-for="(item,index) in proList" @click="godetails(item.id)">
			<!-- <view class="row"> -->
				<image :src="item.img" mode="widthFix"></image>
				<view class="info">
					<text>{{item.goodsname}}</text>	
					<text>￥{{item.market_price}}</text>	
					<text>3565评论</text>	
				</view>
			</view>
		</view>
		<view class="tishi" v-else>
			没有数据亲！
		</view>
	</view>
</template>

<script>
	
	
export default {
	data(){
		return {
			id:"",
			title:"",
			page:1, // 页数
			goodsList:[],
			proList:[],
			totalpage:1
		}
	},
	onLoad(options) {
		let {id,catename} = options;
		this.id = options.id
		this.title = options.catename;
		uni.setNavigationBarTitle({
			title:this.title
		})
	},
	mounted() {
		this.getcategoodPage()
	},
	methods:{
		async getcategoodPage(){
			let data = {
				fid:this.id,
				page:this.page,
				size:3
			}
			let res = await this.$Api._getcategoodPage(data)
			// console.log(res)
			this.totalpage = res.data.list[0]
			let proList = res.data.list[1] || [];
			proList.map((item)=>{
				item.img = this.$baseUrl + item.img
			})
			// 拼接
			this.proList = this.proList.concat(proList)
			// this.proList = proList;
		},
		// 跳转到详情页面
		godetails(id){
			uni.navigateTo({
				url:`../details/details?id=${id}`
			})
		}
		
	},
	onReachBottom() {
		this.page++;
		if(this.page > this.totalpage){
			uni.showToast({
				title:"没有更多数据了~",
				icon:"none"
			})
			return
		}
		this.getcategoodPage()
	}
}
</script>

<style>
	.search{
		margin: 50rpx;
		height: 80rpx;
		background-color: #f26b11;
		border-radius: 80rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	icon{
		margin:0 10rpx 0 250rpx;
	}
	.placeholder{
		color: white;
		font-size: 25rpx;
	}
	.row{
		position: relative;
		margin: 10rpx 20rpx;
		height: 330rpx;
		border-bottom: 1rpx solid #AAAAAA;
	}
	image{
		position: absolute;
		top: 0;
		left:10rpx;
		width: 160rpx;
	}
	.info{
		height: 85%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 200rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		font-size: 25rpx;
	}
	.info text:nth-of-type(2){
		color: red;
	}
	.info text:nth-of-type(3){
		font-size: 20rpx;
		color: #AAAAAA;
	}
	.tishi{
		line-height: 200rpx;
		text-align: center;
		font-size: 40rpx;
		color: #006699;
	}
</style>
